<template>
  <div id="chart-layer" class="chart-layer-container">
    <div v-for="layer in chartLayers" :key="layer.id">
      <!-- 根据类型渲染不同组件 -->
      <div
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
        v-if="layer.type === 'collapse'"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Collapse :items="collapseData" />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'table'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Table :data="(layer.data as ITableData)" />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'list'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <List :data="(layer.data as IListData)" />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'gauge'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Gauge />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'thermometer'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Thermometer :temperature="78" :min-temp="0" :max-temp="100" />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'line'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Line />
        </Panel>
      </div>

      <div
        v-if="layer.type === 'bar'"
        :style="{
          left:
            typeof layer.position.x === 'string'
              ? layer.position.x
              : layer.position.x + 'px',
          top:
            typeof layer.position.y === 'string'
              ? layer.position.y
              : layer.position.y + 'px',
        }"
        class="chart-layer-item"
      >
        <Panel
          :title="layer.name"
          :panel-width="layer.size.width"
          :panel-height="layer.size.height"
        >
          <Bar />
        </Panel>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Panel from "../components/Panel/index.vue";
import Collapse from "../components/Collapse/index.vue";
import { CollapseItem } from "../components/Collapse/types";
import { computed, onMounted, ref } from "vue";
import Button from "../components/Button/index.vue";
import { useChartStore } from "@/stores/chart";
import Table from "../components/Table/index.vue";
import List from "../components/List/index.vue";
import { IListData, ITableData } from "@/stores/types";
import Gauge from "../components/Gauge/index.vue";
import Thermometer from "../components/Thermometer/index.vue";
import Line from "../components/Line/index.vue";
import Bar from "../components/Bar/index.vue";

defineOptions({
  name: "ChartLayer",
});

const chartStore = useChartStore();

const chartLayers = computed(() => chartStore.chartLayers);

const generateSubTitle = () => {
  const subTitle = [];
  for (let i = 0; i < 3; i++) {
    subTitle.push(`二级标题 ${i}-1`);
  }
  return subTitle;
};

const generateCollapseData = () => {
  const collapseData: CollapseItem[] = [];
  for (let i = 0; i < 5; i++) {
    collapseData.push({
      id: i.toString(),
      title: `一级标题 ${i}`,
      subTitle: generateSubTitle(),
    });
  }
  return collapseData;
};

const collapseData = ref<CollapseItem[]>(generateCollapseData());

onMounted(() => {
  chartStore.initChartLayers();
});
</script>

<style scoped lang="scss">
.chart-layer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.chart-layer-item {
  position: absolute;
}
</style>
